<template>
  <el-menu
      :default-active="route.name"
      class="menu-list"
      background-color="#207BF8"
      text-color="#ffffff"
      active-text-color="#ffffff"
      :collapse="isCollapse"
  >
    <el-menu-item class="menu-item" index="chat" @click="clickMenu('chat')">
      <div class="bg"></div>
      <el-icon class="menu-icon chat-icon"><chat-icon /></el-icon>
      <template #title><span class="menu-title">聊天</span></template>
    </el-menu-item>
    <el-menu-item class="menu-item" index="topic" @click="clickMenu('topic')">
      <el-icon class="menu-icon"><collection /></el-icon>
      <template #title><span class="menu-title">话题列表</span></template>
    </el-menu-item>
    <el-menu-item class="menu-item" index="collection" @click="clickMenu('collection')">
      <el-icon class="menu-icon"><star /></el-icon>
      <template #title><span class="menu-title">我的收藏</span></template>
    </el-menu-item>
    <el-menu-item class="menu-item" index="4" @click="clickMenu">
      <el-icon class="menu-icon"><delete /></el-icon>
      <template #title><span class="menu-title">回收站</span></template>
    </el-menu-item>
  </el-menu>
</template>

<script lang="ts" setup>
import {
    Delete
} from '@element-plus/icons-vue'
import Collection from "@/components/icons/docIcon.vue";
import Star from '@/components/icons/starIcon.vue';
import ChatIcon from "@/components/icons/chatIcon.vue"
import {computed} from "vue";
import {type Router, useRoute, useRouter} from "vue-router";
import topicStore from "@/stores/topic";
const props = defineProps({
  isCollapse: Boolean
});
const topic = topicStore();
const router:Router = useRouter();
const route = useRoute();
const isCollapse = computed(() => props.isCollapse);
const topicId: any = route.query['topic_id'];
topic.topic.topicId = topicId && topicId !== topic.topic.topicId ? topicId : topic.topic.topicId;
const clickMenu = async (route: string) => {
  const query:any = {};
  if (route === 'chat' || route === 'collection') {
    if (topic.topic.topicId) {
      query['topic_id'] = topic.topic.topicId;
    }else{
      let res = await  topic.addTopic();
      query['topic_id'] = res.topicId;
    }
  }
  await router.replace({name: route, query: query});
}
</script>

<style lang="less" >
@import "../assets/common.less";
.menu-list:not(.el-menu--collapse) {
  width: 238px;
  min-height: 400px;
  padding-left: 0;
}
.menu-list {
  border-right: none;
  margin-top: 58px;
  .menu-item {
    height: 40px;
    padding: 0;
    font-size: 14px;
    .menu-icon {
      margin-left: 20px;
      svg {
        path{
          fill: #FFFFFF !important;
        }
      }
    }
    .menu-icon.chat-icon {
      margin-left: 20px;
      svg {
        path.out{
          fill: none !important;
          stroke: #FFFFFF !important;
        }
        path.inner{
          fill: none !important;
          stroke: #FFFFFF !important;
        }
        rect {
          fill: #FFFFFF !important;
        }
      }
    }
    .menu-title {
      margin-left: 10px;
    }
  }
  .menu-item.is-active {
    background-color: @mainWhite;
    opacity: 0.4;
    color: #222222;
    .menu-icon{
      svg {
        path{
          fill: #222222 !important;
        }
      }
    }
  }
  .menu-item.is-active {
    .menu-icon.chat-icon {
      svg {
        path.out{
          fill: none !important;
          stroke: #222222 !important;
        }
        path.inner{
          fill: none !important;
          stroke: #222222 !important;
        }
        rect {
          fill: #222222 !important;
        }
      }
    }
  }
}
.menu-list.el-menu--collapse {
  .menu-item {
    .menu-icon{
      margin-left: 0;
    }
  }
}
</style>
